@import "~@css/mixing.less";

.praiseMumBoxWrap {
  width: 100%;
  padding-bottom: 45px;

  .contentBox {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    padding: 0px 24px;
    margin: 32px 0px 0;

    .messageBoardBg {
      width: 100%;
      height: 100%;
    }

    .bottomBox {
      position: absolute;
      left: 52px;
      right: 52px;
      bottom: 48px;

      .barrageBox {
        overflow: hidden;
        width: 100%;
        height: 600px;
        position: relative;

        .textItem {
          width: 136%;
          height: 46px;
          position: absolute;
          top: 0px;
          left: 0px;
          transform: translateX(80%);

          .textItem-inner {
            display: inline-block;
            height: 46px;
            line-height: 46px;
            color: #fff;
            font-size: 21px;
            font-weight: 500;
            background: #ff497e;
            opacity: 0.8;
            border-radius: 23px;
            box-sizing: border-box;
            padding: 0px 24px;
          }

          .optionsCurrentSelected {
            background: #ffb232;
            opacity: 1;
          }
        }

        .top10 {
          top: 10px;
        }

        .top70 {
          top: 70px;
        }

        .top130 {
          top: 130px;
        }

        .top190 {
          top: 190px;
        }

        .top250 {
          top: 250px;
        }

        .top310 {
          top: 310px;
        }

        .top370 {
          top: 370px;
        }

        .top430 {
          top: 430px;
        }

        .top490 {
          top: 490px;
        }

        .top550 {
          top: 550px;
        }

        .top100 {
          top: 100px;
        }

        .top150 {
          top: 150px;
        }

        .top200 {
          top: 200px;
        }

        .top250 {
          top: 250px;
        }

        .top300 {
          top: 300px;
        }

        .top350 {
          top: 350px;
        }

        .top400 {
          top: 400px;
        }

        .top450 {
          top: 450px;
        }

        .top500 {
          top: 500px;
        }

        .top550 {
          top: 550px;
        }

        .translate10 {
          transform: translateX(110%);
        }

        .translate20 {
          transform: translateX(120%);
        }

        .translate30 {
          transform: translateX(130%);
        }

        .translate40 {
          transform: translateX(140%);
        }

        .translate50 {
          transform: translateX(150%);
        }

        .translate60 {
          transform: translateX(160%);
        }
      }

      .isBarrageStart {
        .textItem {
          transform: translateX(-100%);
          transition: transform 8s linear;
        }
      }

      .bottomButton {
        position: relative;
        width: 100%;
        margin-top: 32px;

        img {
          z-index: 9;
          position: relative;
          width: 100%;
        }

        .optionsBox {
          position: absolute;
          left: 0px;
          right: 0px;
          bottom: 36px;
          background: rgba(#fab7d8, 0.81);
          border-radius: 14px;
          padding: 2px 16px 56px;
          box-sizing: border-box;

          .optionsTextItem {
            width: 100%;
            height: 56px;
            line-height: 56px;
            text-align: center;
            background: #fffcfe;
            border-radius: 27px;
            margin-top: 16px;
            box-sizing: border-box;
            padding: 0px 6px;
            color: #862E5A;
            .mixin-single-ellipsis();
          }
        }
      }
    }
  }
}

// .praiseMumAction {
//   .am-action-sheet {
//     .am-action-sheet-content {
//       .am-action-sheet-close {
//       }
//       .am-action-sheet-body {
//         .am-action-sheet-message {
//         }
//         .am-action-sheet-button-list {
//           .am-action-sheet-button-list-item {
//             font-size: 24px;
//             padding: 0 2.133vw;
//             margin: 0;
//             position: relative;
//             height: 13.333vw;
//             line-height: 13.333vw;
//             box-sizing: border-box;
//             white-space: nowrap;
//             text-overflow: ellipsis;
//             overflow-x: hidden;
//           }
//         }
//       }
//     }
//   }
// }